<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="bord">
    <div class="title">表单标签</div>
    <div class="introduce">
        1.数据框 input标签 <br/>
        　　　　　    　　    　　　text文本框<br/>
        　　　　　    　　    　　　password密码框<br/>
        　　　　　    　　    　　　radio单选框<br/>
        　　　　　    　　    　　　checkbox复选框<br/>
        　　　　　    　　    　　　file文件控件<br/>
        　　　　　    　　    　　　submit提交<br/>
        　　　　　    　　    　　　reset重置<br/>
        <br/>
        　　　　　    　　    　　　select下拉选择框<br/>
        　　　　　    　　    　　　option选择项<br/>
        　　　　　    　　    　　　textarea富文本框<br/>
        <br/>
        　　　　　 2.辅助类标签label标签<br/>
        　　　　　    　　    　　　size 长度控制[建议用样式控制]<br/>
        　　　　　    　　    　　　maxlength 允许输入的最长限度<br/>
        　　　　　    　　    　　　disabled 禁用[灰色显示]<br/>
        　　　　　    　　    　　　readonly 只读<br/>
        <br/>
        </p>
    </div>
</div>
<div class="bord">
    <div class="title">演示效果</div>
    <div class="introduce">
        <p style="font-weight: bold">文本框</p>
        <br/>
        <br/>
        代码示例:&lt;form&gt;&lt;p&gt;&lt;label&gt;姓名：&lt;input type="text"/&gt;&lt;/label&gt;&lt;/p&gt;&lt;/form&gt;
        <br/>
        <br/>
        代码效果:<form><p><label>姓名：<input type="text"/></label></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">密码框</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;&lt;p&gt;&lt;label&gt;密码：&lt;input type="password"/&gt;&lt;/label&gt;&lt;/p&gt;&lt;/form&gt;
        <br/>
        <br/>
        代码效果：<form><p><label>密码：<input type="password"/></label></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">单选框</p>
        <br/>
        <br/>
        代码示例：
        &lt;form&gt;
        &lt;p&gt;会员：&lt;label&gt;&lt;input name="member" type="radio"/&gt;永久会员&lt;/label&gt;<br/>
        　　　&lt;label&gt;&lt;input name="member" type="radio"/&gt;包月会员&lt;/label&gt;&lt;/p&gt;
        &lt;/form&gt;
        <br/>
        <br/>
        <br/>
        代码效果：<form><p>会员：<label><input name="member" type="radio"/>永久会员</label>
        <label><input name="member" type="radio"/>包月会员</label></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold"> 复选框</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;&lt;p&gt;爱好：&lt;label&gt;&lt;input name type ="checkbox"/&gt;音乐&lt;/label&gt;<br/>
        &lt;label&gt;&lt;input name type ="checkbox"/&gt;运动&lt;/label&gt;<br/>
        &lt;label&gt;&lt;input name type ="checkbox"/&gt;看书&lt;/label&gt;&lt;/p&gt;&lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form><p>爱好：<label><input name type ="checkbox"/>音乐</label>
        <label><input name type ="checkbox"/>运动</label>
        <label><input name type ="checkbox"/>看书</label></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">下拉选择框和选择标签</p>
        <br/>
        <br/>
        代码示例：
        &lt;form&gt;<br/>
        &lt;p&gt;性别：<br/>
        &lt;select&gt;<br/>
        &lt;option&gt;男&lt;/option&gt;<br/>
        &lt;option&gt;女&lt;/option&gt;<br/>
        &lt;/select&gt;<br/>
        &lt;/p&gt;<br/>
        &it/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form>
        <p>性别：
            <select>
                <option>男</option>
                <option>女</option>
            </select>
        </p>
    </form>
        <br/>
        <br/>
        <p style="font-weight: bold">副文本框</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;
        &lt;p&gt;&lt;label&gt;个人介绍：&lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果:<form>
        <p><label>个人介绍：<textarea></textarea></label></p>
    </form>
        <br/>
        <br/>
        <p style="font-weight: bold">文件控件</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;&lt;p&gt;头像：&lt;input type="file"/&gt;&lt;/p&gt;&lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form><p>头像：<input type="file"/></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">label标签</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;&lt;p&gt;年级：&lt;label&gt;&lt;input name="member" type="radio"/&gt;初一&lt;/label&gt;<br/>
        &lt;label&gt;&lt;input name="member" type="radio"/&gt;初二&lt;/label&gt;<br/>
        &lt;label&gt;&lt;input name="member" type="radio"/&gt;初三&lt;/label&gt;&lt;/p&gt;&lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form><p>年级：<label><input name="member" type="radio"/>初一</label>
        <label><input name="member" type="radio"/>初二</label>
        <label><input name="member" type="radio"/>初三</label></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">提交</p>
        <br/>
        <br/>
        代码示例：&lt;form action="../homework/cgym.html"&gt;&lt;p&gt;&lt;label&gt;姓名：&lt;input type="text"/&gt;&lt;/label&gt;&lt;input type="submit"/&gt;&lt;/p&gt;&lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form action="../homework/cgym.html"><p><label>姓名：<input type="text"/></label><input type="submit"/></p></form>
        <br/>
        <br/>
        <p style="font-weight: bold">重置</p>
        <br/>
        <br/>
        代码示例：&lt;form&gt;&lt;p&gt;&lt;label&gt;姓名：&lt;input type="text"/&gt;&lt;input type="reset"/&gt;&lt;/label&gt;&lt;/p&gt;&lt;/form&gt;<br/>
        <br/>
        <br/>
        代码效果：<form><p><label>姓名：<input type="text"/><input type="reset"/></label></p></form>
        <br/>
        <br/>
    </div>
</div>
</body>
</html>